<template>
  <div class="main">
    <div class="container">
        <div class="container-top">
            <div class="top">
                <div class="title">标记项目</div>
            </div>
            <div class="search">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="formInline.projectValue" placeholder="项目名称"></el-input>
                    </el-form-item>
                    <el-form-item class="principal">
                        <el-input v-model="formInline.principalValue" placeholder="负责人"></el-input>
                    </el-form-item>
                    <el-form-item  class="selectCommon">
                      <el-select v-model="formInline.schoolValue" placeholder="学校名称">
                        <el-option label="全部" value="0"></el-option>
                        <el-option v-for="(item,index) in schoolList" :key="index" :label="item.unit_name" :value="item.unit_id"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item  class="selectCommon">
                      <el-select v-model="formInline.projectType" placeholder="项目类别">
                        <el-option label="全部" value="0"></el-option>
                        <el-option v-for="(item,index) in ProjectCate" :key="index" :label="item.cate_name" :value="item.cate_id"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item class="state">
                      <el-select v-model="formInline.status" placeholder="状态">
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="待评审" value="1"></el-option>
                        <el-option label="已评审" value="2"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSearch">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            >
            <el-table-column
              width="20">
            </el-table-column>
            <!-- <el-table-column
              width="18"
              class-name="fujian">
                <img src="@/assets/images/fujian.png" alt="">
            </el-table-column> -->
            <el-table-column
              prop="declare_name"
              label="课程名称">
            </el-table-column>
            <el-table-column
              prop="unit_name"
              label="学校名称">
            </el-table-column>
            <el-table-column
              prop="project_name"
              label="项目名称"
              width="350">
            </el-table-column>
            <el-table-column
              prop="cate_name"
              label="项目分类"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="real_name"
              label="申报人"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="创建时间"
              width="175"
              show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{scope.row.add_time | formatTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="statusone_show"
              label="状态"
              width="100">
            </el-table-column>
            <el-table-column
              label="分值"
              class-name="score"
              width="90"
            >
              <template slot-scope="scope">
                <span>{{scope.row.score_total === 0 ? '未评分' : scope.row.score_total}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              class-name="oper"
              width="80"
              show-overflow-tooltip>
              <template slot-scope="scope">
                  <span @click="ShenBaoDetails(scope.row)">{{scope.row.score_total != 0 ? '修改': '评分'}}</span>
              </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-count="total_page"
              :page-size="page_size"
              layout="prev, pager, next,slot"
              :total="totalAll">
                <el-input v-model="page"></el-input>
                <span @click="jumperPage()">GO</span>
            </el-pagination>
        </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import { ExperMarkList, UnitList, CateTree} from '@/api/login';
export default {
  name: 'BiaoJi',
  data () {
    return {
        formInline: {
          projectValue: '',
          principalValue: '',
          schoolValue:'',
          projectType: '',
          status: ''
        },
        // 当前页码
        currentPage: 1,
        // 输入页码
        page: 1,
        // 总页码数
        total_page: 0,
        // 每页展示个数
        page_size: 6,
        // 总条目数
        totalAll: 0,
        tableData: [],
        multipleSelection: [],
        value: null,
        // 学校列表
        schoolList: '',
        // 项目类别
        ProjectCate: '',
        token: '',
        type: '1',
        Showbg: false
    }
  },
  filters:{
    formatTime(time){
      return moment(time * 1000).format('YYYY-MM-DD')
    }
  },
  methods: {
    // onSortChange({ prop, order }) {
    //   console.log(order);
    // },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.queryExperMarkList();
    },
    ShenBaoDetails(row){
        this.$router.push({
            path:'/shenbao-details',
            query: {
                declare_id: row.declare_id
            }
        })
    },
    jumperPage(){
        if(this.page > this.total_page){
            this.page = this.total_page
            alert('超过总页数')
        }
        this.currentPage = this.page-0
    },
    // 点击搜索
    onSearch() {
      this.queryExperMarkList();
    },
    // 获取学校列表
    queryUnitList(){
        UnitList({
            token: this.token
        }).then((result)=>{
            const {data} = result;
            this.schoolList = data;
        })
    },
    // 获取项目类别
    queryCateTree(){
        CateTree({
            token: this.token
        }).then((result) => {
            const {data} = result;
            this.ProjectCate = data;
        })
    },
    // 获取列表
    queryExperMarkList(){
        ExperMarkList({
            token: this.token,
            type: this.type,
            project_name: this.formInline.projectValue,
            real_name: this.formInline.principalValue,
            cate_id: this.formInline.projectType,
            unit_id: this.formInline.schoolValue,
            status: this.formInline.status,
            ispage: '1',
            page_no: this.currentPage,
            page_size: this.page_size
        }).then((result)=>{
            const {data} = result;
            const {list} = data;
            this.tableData = list;
            this.totalAll = data.count-0;
            this.total_page = Math.ceil(this.totalAll / this.page_size);
            if(result.msg === '数据不存在'){
              this.$router.push({
                path: '/dataError'
              })
            }else if(result.msg === '项目已过期'){
              this.$router.push({
                path: '/overdueError'
              })
            }
            if(result.code === -1){
              this.$router.push({
                path: '/rootError'
              })
            }
        })
    },
    backgroundShow(){
        this.$emit('backgroundShow',this.Showbg)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  created(){
    this.backgroundShow();
  },
  mounted(){
    const token = sessionStorage.getItem('token');
    this.token = token;
    this.queryExperMarkList();
    this.queryUnitList();
    this.queryCateTree();
  }
}
</script>
<style lang='scss' scoped>
.main{
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0;
    color: #242748;
    margin: 0 auto;
    position: relative;
    font-size: 18px;
    margin: 0 50px 20px 30px;
    text-align: left;
    font-family: "PingFang";
    .container{
        width: 100%;
        height: 925px;
        padding-bottom: 30px;
        background-color: #fff;
        border-radius: 10px;
        .container-top{
            .top{
                display: flex;
                margin-bottom: 30px;
                .title{
                    font-size: 26px;
                    font-family: "黑体";
                    color: #5673ff;
                    margin-right: 60px;
                }
                .column{
                    display: flex;
                    font-size: 16px;
                    .item{
                        display: flex;
                        align-items: center;
                        padding-right: 20px;
                        img{
                            width: 15px;
                            height: 15px;
                            margin-right: 12px;
                        }
                        p{
                            cursor: pointer;
                        }
                    }
                    .all {
                      p {
                        color: #3054fe;
                      }
                    }
                    .has{
                      p{
                        color: #feaa2d;
                      }
                    }
                }
            }
            .search{
                display: flex;
                .selectCommon{
                    width: 13%;
                }
                .state{
                    width: 8%;
                }
                .principal{
                    width: 13%;
                }
                /deep/.el-form{
                    width: 100%;
                }
            }
            /deep/.el-badge__content.is-fixed.is-dot{
                left: 2px;
                top: 5px;
            }
            /deep/.el-form-item{
                margin-bottom: 0;
                font-size: 16px;
            }
            /deep/.el-form-item__content{
                line-height: 0;
            }
            /deep/input::placeholder{
                color: #2b3139;
                font-family: "PingFang";
            }
            /deep/.el-input__suffix {
                top: 50%;
                transform: translateY(-50%);
            }
            /deep/.el-input__inner{
                padding: 6px 15px;
                line-height: 0;
                height: auto;
                font-size: 16px;
                font-family: "PingFang";
            }
            /deep/.el-button{
                padding: 11px 20px;
                border: none;
                font-family: "PingFang";
                font-weight: 700;
                color: #fff;
            }
            /deep/.el-button--primary{
                background-color: #5672ff!important;
            }
            /deep/.el-input__icon{
                height: auto;
            }
            /deep/.el-select .el-input .el-select__caret{
                transform: none;
            }
            /deep/.el-icon-arrow-up:before{
                content: "\e615";
                font-family: "iconfont";
                font-size: 16px;
            }
        }
        .container-top{
            padding: 33px 45px 25px;
            border-bottom: solid 1px #e7e9eb;
        }
        tbody {
            color: #181b3b;
        }
        /deep/.el-table{
            .cell{
                font-size: 18px;
            }
            .el-table__row{
                padding: 0 35px 0 45px;
            }
        }
        /deep/.el-table td, /deep/.el-table th{
            padding: 20px 0;
        }
        /deep/.select{
            text-align: right;
            .cell{
                padding-right: 20px;
            }
        }
        /deep/.fujian{
            padding: 0;
            .cell{
                width: 16px;
                padding: 0;
            }
        }
        /deep/tbody .score,/deep/tbody .oper{
            .cell{
                color: #5673ff;
            }
        }
        /deep/tbody .oper{
            span{
                cursor: pointer;
            }
        }
        /deep/.el-checkbox__inner{
            width: 20px;
            height: 20px;
        }
        /deep/.el-checkbox__inner::after{
            width: 6px;
            height: 8px;
        }
        /deep/.el-checkbox__input.is-checked .el-checkbox__inner,/deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner{
            background-color: #5672ff;
            border-color: #5672ff;
        }
        /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
            top: 50%;
            transform: translate(-50%,-50%);
            width: 8px;
            left: 50%;
        }
        /deep/.el-table--enable-row-hover .el-table__body tr:hover>td{
            background-color: #f0f5fb!important;
        }

        .block{
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            /deep/.el-input{
                width: 30px;
                height: 100%;
            }
            /deep/.el-input__inner{
                height: 25px;
                padding: 0;
                border: solid 1px #f0f1f4;
            }
            /deep/.el-pagination button, 
            /deep/.el-pagination span,
            /deep/.el-pager li{
                height: 25px;
                line-height: 25px;
                color: #181b3b;
                font-weight: 700;
            }
            /deep/.el-pagination span{
                cursor: pointer;
            }
            /deep/.el-pagination.is-background .btn-next, 
            /deep/.el-pagination.is-background .btn-prev, 
            /deep/.el-pagination.is-background .el-pager li{
                background-color: #fff;
                border: solid 1px #f0f1f4;
                margin-right: 8px;
            }
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
                color: #fff;
                background-color: #5272fd;
                border: solid 1px #3957fd;
                font-size: 16px;
            }
            span{
                display: inline-block;
                width: 35px;
                height: 25px;
                line-height: 25px;
                border: solid 1px #f0f1f4;
                margin-left: 8px;
                border-radius: 2px;
            }
        }
        /deep/.el-pagination{
            text-align: center;
        }
        /deep/i.iconfont.icon-xiangmushenbao{
            margin-right: 5px;
        }
    }
    .green{
        background-color: #03c5a9;
    }
    .yellow{
        background-color: #f6ad3c;
        margin-left: 18px;
    }
}
</style>